<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>焦点轮播</title>
<link href="lunbo.css" rel="stylesheet">
<script type="text/javascript" src="lunbo.js"></script>
    <script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<style type="text/css">
    *{margin:0;padding: 0;text-decoration: none;}
    body{padding: 20px}
    .container{width: 600px;height: 400px;border: 3px solid #333;overflow: hidden;position: relative;margin:0 auto;}
    /*图片裂变*/
    .list{width: 3000px;height: 400px;position: absolute;z-index: 1;}
    /*图片大小根据容器大小来定*/
    .list img{float: left;width: 600px;height: 400px}
    /*小圆点样式*/
    .buttons{position: absolute;height: 10px;width: 100px;z-index: 2;bottom: 20px;left: 250px}
    .buttons span{cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background-color: #333;margin-right: 5px}
    .buttons .on{background-color: #FFB343}
    /*箭头样式*/
    .arrow{cursor: pointer;display: none;line-height: 39px;text-align: center;font-size: 36px;font-weight: bold;width: 40px;height: 40px;position: absolute;z-index: 2;top: 180px;background-color: rgba(0,0,0,.3);color: #fff}
    .arrow:hover{background-color: rgba(0,0,0,.7)}
    .container:hover .arrow{display: block;}
    #prev{left: 20px}
    #next{right: 20px}
</style>
<script type="text/javascript">
     // 在页面加载过程中执行
    window.onload=function(){
        var container = document.getElementsByClassName("container")[0];
        var list = document.getElementsByClassName("list")[0];
        var parOfBtn = document.getElementsByClassName("buttons")[0];
        var buttons = parOfBtn.getElementsByTagName("span");
        var prev = document.getElementById("prev");
        var next = document.getElementById("next");
        var index = 1; //图片的索引
        var num = list.children.length - 2; //图片数量
        var amountLength = num*(-600);
        var animated = false; //判断是否正在动画
        var time; //定时器

        //根据图片数量追加小圆点
        function appendBtns() {
            parOfBtn.innerHTML = "";
            for(var i = 1;i <= num;i++) {
                if(i == 1) {
                    $(parOfBtn).append("<span index='" + i + "' class='on'></span>")
                }else{
                    $(parOfBtn).append("<span index='" + i + "'></span>")
                }
            }
        }
        appendBtns();

        next.onclick = function(){
            if (!animated) {
                animate(-600);
            }
        }
        prev.onclick = function(){
            if (!animated) {
                animate(600);
            }
        }

        //设置自动切换图片(每隔3秒切换一次)
        function play() {
            time = setInterval(function(){
                next.click();
            },3000)
        }
        
        //清除定时器
        function stop() {
            clearInterval(time);
        }

        //鼠标移到图片上时触发
        container.onmouseover = stop;
        //鼠标离开图片后触发
        container.onmouseout = play;
        play();

         //添加按钮事件
        for(var i = 0;i<buttons.length;i++){
            buttons[i].onclick = function() {
                if (!animated) {
                    if (this.className == "on") {
                        return;
                    }
                    var myIndex = parseInt(this.getAttribute("index"));
                    var myOffSet = (myIndex - index) * (-600);
                    animate(myOffSet);
                }
            }
        }

        //显示选中的原点
        function showButtons() {
            for(var i = 0;i<buttons.length;i++){
                if(buttons[i].className == "on"){
                    buttons[i].className = "";
                    break;
                }
            }
            buttons[index - 1].className = "on";
        }

        //前后偏移
        function animate(offset){
            animated = true;
            var newLeft = parseInt(list.style.left) + offset
            var time = 300; //位移总时间
            var interval = 10; //每次的位移时间量
            var speed = offset/(time/interval); //每次位移的距离

            //内部函数,只能在该animate函数中调用go函数
            function go() {
                if(speed < 0 && parseInt(list.style.left) > newLeft ||speed > 0 && parseInt(list.style.left) < newLeft){
                    list.style.left = speed + parseInt(list.style.left) + "px";
                    //每隔interval秒执行一次go函数
                    setTimeout(go,interval);
                }else{
                    if(newLeft > -600){
                        list.style.left = amountLength + "px";
                    }
                    else if(newLeft < amountLength){
                        list.style.left = -600 +"px";
                    }
                    index = -parseInt(list.style.left)/600;
                    showButtons();
                    animated = false;
                }
            }
            //调用内部函数
            go();
        }
    }
</script>
</head>
<body>
    <div class="container">
    	<div class="list" style="left: -600px;">
    		<img src="images/3.jpg" alt="3">
    		<img src="images/1.jpg" alt="1">
    		<img src="images/2.jpg" alt="2">
    		<img src="images/3.jpg" alt="3">
    		<img src="images/1.jpg" alt="1">
    	</div>
        <div class="buttons"></div>
    <a href="javasrcipt:void(0);" class="arrow" id="prev">&lt;</a>
    <a href="javasrcipt:void(0);" class="arrow" id="next">&gt;</a>
    </div>
</body>
</html>